<template>
<div >
    <div id="map">   
    </div>
</div>
</template>

<script>

export default {
    
    name:'smallMap',
    data(){
        return{
            bbb:'',
            updata:'',
            bounds:[[109.60833345934815,18.30688403786877], // Southwest
                    [109.60997606633603,18.31053065602718]], // Northeast
                    
        }
    },
    props:['transPosition'],
    mounted(){
        this.initmap();
    },
    methods:{
        initmap(){
            // mapboxgl.accessToken = 'pk.eyJ1Ijoic3g4NTQ5NjUxODUiLCJhIjoiY2toYnA4aHk2MHNjMzJwazQ0c2hnb2Y1dSJ9.tx6xx7jLEKAAwdTGLhsenQ';
            // var map = new mapboxgl.Map({
            // container: 'map', 
            // style: 'mapbox://styles/sx854965185/ckhzmu4c31h641alu10s862w4', 
            // center: [109.608275784, 18.3086668], // 起始位置 109.60827578376235,18.30866679535378,0
            // zoom: 16, // 开始的缩放倍数
            // maxBounds: this.bounds
            // });


             var map = new mapboxgl.Map({
                container: 'map', 
                style: {
                    "version": 8,
                    "sources": {
                        "raster-tiles": {
                            // "attribution": attribution,
                            "type": "raster",
                            "tiles": [window._CONFIG['serveUrl'] + ':8090/iserver/services/map-ShuangChuang-2/rest/maps/双创导航@导航/zxyTileImage.png?z={z}&x={x}&y={y}'],
                            "tileSize": 256
                        }
                    },
                    "layers": [
                    {
                        "id": "simple-tiles",
                        "type": "raster",
                        "source": "raster-tiles",
                        "minzoom": 0,
                        "maxzoom": 22
                    },
                   
                    ]

                },
                center: [109.60904405900261,18.308726500629405], 
                zoom: 16,
                pitch: 0,
                bearing: 50,
                // maxBounds: this.bounds
            });

            var nav = new mapboxgl.NavigationControl(
                {
                    //是否显示指南针，默认为true
                    "showCompass": true,
                    //是否显示缩放按钮，默认为true
                    "showZoom":false
                }
                );
            //添加导航控件，控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四种，默认为'top-right'
            map.addControl(nav, 'top-left');


            
            var _this = this
            map.on('load', function () {
                map.addSource("geojson", _this.createDot([109.60856115,18.30845836]));

                map.loadImage('/static/img/light.png', 
                function(error, image) {
                    if (error) throw error;
                    map.addImage('point', image);
                    map.addLayer({
                        "id": "points",
                        "type": "symbol",
                        "source": "geojson",
                        "layout": {
                            "icon-image": "point",
                            "icon-size": 0.06
                        },
                        
                    });
                })
            })
            // 更新位置的方法
            this.updata = function(){
                let data = this.createDot([this.transPosition[0],this.transPosition[1]]).data
                if(map.getSource('geojson')){
                    map.getSource('geojson').setData(data);
                }
                map.rotateTo(((this.transPosition[2]*180/3.1415926)-90) % 360, {duration: 0});
            }

        },
        // 返回json格式
        createDot(center){

            var coords = {
                latitude: center[1],
                longitude: center[0]
            };

            var ret = [];
            ret.push([coords.longitude, coords.latitude]);
            ret.push(ret[0]);

            return {
                "type": "geojson",
                "data": {
                    "type": "FeatureCollection",
                    "features": [{
                        "type": "Feature",
                        "geometry": {
                            "type": "Point",
                            "coordinates": ret[0]
                        }
                    }]
                }
            };
        }
    },
    watch:{
        transPosition(n,o){
            if(o!=''){
                this.updata()
            }
        }
    }
}
</script>

<style>
#map{
    height: 100%;
    width: 100%;
}
/* .mapboxgl-ctrl {
    display: none !important;
} */


</style>